.menu-wrapper {
  .horizontal-collapse-transition {
    transition: 0s width ease-in-out, 0s padding-left ease-in-out,
      0s padding-right ease-in-out;
  }
  transition: width 0.28s;
  width: $menuWidth !important;
  min-width: $menuWidth !important; //2021.7-12 for mobile
  height: 100vh;
  // position: fixed; //2021.7-12 for mobile
  // top: 0; //2021.7-12 for mobile
  // bottom: 0; //2021.7-12 for mobile
  // left: 0; //2021.7-12 for mobile
  background-color: $menuBg;
  z-index: 1001;
  overflow: hidden;
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .menu-logo__container {
    width: 100%;
    height: 182px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .user-container {
      color: $fontWhiteColor;
      font-size: 14px;
    }
  }
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */

  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }
  .el-scrollbar {
    height: calc(100% - 182px);
  }

  .el-menu {
    border: none;
    // width: 100% !important;
    .el-submenu {
      padding: 4px 0;
      margin-bottom: 12px;
      .nav-icon {
        margin-left: 10px;
        margin-right: 25px;
        display: inline-block;
        width: 28px;
        height: 28px;
        vertical-align: middle;
        background: url(../assets/images/menu/all-icon.png);
        &.icon-dashboard {
          background-position: -27px -26px;
        }
        &.icon-user {
          background-position: -178px -26px;
        }
        &.icon-device {
          background-position: -77px -26px;
        }
        &.icon-order {
          background-position: -127px -26px;
        }
        &.icon-visualization {
          background-position: -430px -26px;
        }
        &.icon-transaction {
          background-position: -481px -26px;
        }
        &.icon-activity {
          background-position: -279px -26px;
        }
        &.icon-config {
          background-position: -531px -26px;
        }
        &.icon-alarm {
          background-position: -379px -26px;
        }
        &.icon-setting {
          background-position: -632px -26px;
        }
        &.icon-message {
          background-position: -682px -26px;
        }
        &.icon-authorize {
          background-position: -582px -26px;
        }
        &.icon-statistics {
          background-position: -733px -26px;
        }
        &.icon-account {
          background-position: -228px -26px;
        }
        &.icon-myself {
          background-position: -783px -26px;
        }
        &.icon-timecard {
          background-position: -834px -26px;
        }
      }
      &.is-opened {
        background: #18253f;
        border-radius: 4px;
        .el-submenu__title {
          color: #fff !important;
        }
        .nav-icon {
          &.icon-dashboard {
            background-position: -27px -72px;
          }
          &.icon-user {
            background-position: -178px -72px;
          }
          &.icon-device {
            background-position: -77px -72px;
          }
          &.icon-order {
            background-position: -127px -72px;
          }
          &.icon-visualization {
            background-position: -430px -72px;
          }
          &.icon-transaction {
            background-position: -481px -72px;
          }
          &.icon-activity {
            background-position: -279px -72px;
          }
          &.icon-config {
            background-position: -531px -72px;
          }
          &.icon-alarm {
            background-position: -379px -72px;
          }
          &.icon-setting {
            background-position: -632px -72px;
          }
          &.icon-message {
            background-position: -682px -72px;
          }
          &.icon-authorize {
            background-position: -582px -72px;
          }
          &.icon-statistics {
            background-position: -733px -72px;
          }
          &.icon-account {
            background-position: -228px -72px;
          }
          &.icon-myself {
            background-position: -783px -72px;
          }
          &.icon-timecard {
            background-position: -834px -72px;
          }
        }
        .el-icon-arrow-down:before {
          content: '\e6d8' !important;
        }
      }
      .el-submenu__title {
        background: inherit;
        span {
          font-size: 14px;
          font-weight: 700;
        }
      }
      .el-menu-item {
        font-size: 14px;
        padding-left: 83px !important;
        height: 44px;
        line-height: 44px;
        // min-width: $menuWidth !important;

        &.is-active {
          background: transparent;
        }
      }
      .el-icon-arrow-down:before {
        content: '\e6d9' !important;
      }
    }
  }
}
